<template>
  <div class="app-container home">
    <div style="width: 100%; height: 500px">
      <barChart></barChart>
    </div>

    <div style="display: flex; margin-top: 10px">
      <div style="width: 50%">
        <span style="
            color: #1e2c3c;
            font-style: normal;
            font-weight: 800;
            font-family: sans-serif;
            font-size: 16px;
          ">计分详情</span>
        <el-divider></el-divider>
        <div style="position: relative">
          <el-tabs v-model="activeTab" @tab-click="handleClick" type="border-card">
            <el-tab-pane label="0分矿" name="0">
              <el-table :data="tableData" style="width: 100%" border height="350px">
                <el-table-column prop="mineManager" label="矿长" width="90">
                </el-table-column>
                <el-table-column label="计分" width="90">
                  <template >  0 分  </template> 
                  </el-table-column>
                <el-table-column prop="mineName" label="矿名称" width="180">
                </el-table-column>
                <el-table-column prop="time" label="执法时间" :formatter="typeFormat">
                </el-table-column>
                <el-table-column prop="lawMan" label="执法人">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="3分矿" name="3">
              <el-table :data="tableData" style="width: 100%" border height="350px">
                <el-table-column prop="mineManager" label="矿长" width="90">
                </el-table-column>
                <el-table-column label="计分" width="90">
                  <template >  3 分  </template> 
                </el-table-column>
                <el-table-column prop="mineName" label="矿名称" width="180">
                </el-table-column>
                <el-table-column prop="time" label="执法时间" :formatter="typeFormat">
                </el-table-column>
                <el-table-column prop="lawMan" label="执法人">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="6分矿" name="6">
              <el-table :data="tableData" style="width: 100%" border height="350px">
                <el-table-column prop="mineManager" label="矿长" width="90">
                </el-table-column>
                <el-table-column label="计分" width="90">
                  <template >  6 分  </template> 
                </el-table-column>
                <el-table-column prop="mineName" label="矿名称" width="180">
                </el-table-column>
                <el-table-column prop="time" label="执法时间" :formatter="typeFormat">
                </el-table-column>
                <el-table-column prop="lawMan" label="执法人">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="9分矿" name="9">
              <el-table :data="tableData" style="width: 100%" border height="350px">
                <el-table-column prop="mineManager" label="矿长" width="90">
                </el-table-column>
                <el-table-column label="计分" width="90">
                  <template >  9 分  </template> 
                </el-table-column>
                <el-table-column prop="mineName" label="矿名称" width="180">
                </el-table-column>
                <el-table-column prop="time" label="执法时间" :formatter="typeFormat">
                </el-table-column>
                <el-table-column prop="lawMan" label="执法人">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="12分矿" name="12">
              <el-table :data="tableData" style="width: 100%" border height="350px">
                <el-table-column prop="mineManager" label="矿长" width="90">
                </el-table-column>
                <el-table-column label="计分" width="90">
                  <template >  12 分  </template> 
                </el-table-column>
                <el-table-column prop="mineName" label="矿名称" width="180">
                </el-table-column>
                <el-table-column prop="time" label="执法时间" :formatter="typeFormat">
                </el-table-column>
                <el-table-column prop="lawMan" label="执法人">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-button type="primary" size="mini" style="position: absolute; right: 10px; top: 5px"
            @click="downLoad">导出</el-button>
        </div>
      </div>

      <div style="width: 50%; height: 500px">
        <chart></chart>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import barChart from "./components/BarChart.vue";
import chart from "./components/ScoringScenario.vue";
import { getMineScoreListServe } from "@/api/scoringStatistics"

export default {
  name: "Index",
  components: { barChart, chart },
  data() {
    return {
      activeTab: '0',
      tableData: [],
    };
  },
  mounted() {
    this.getMineScoreList();
  },
  watch: {
    activeTab: {
      handler: function (newVal, oldVal) {
        this.getMineScoreList();
      }
    }
  },
  methods: {
    typeFormat(row) {
      return moment(row.time).format('YYYY-MM-DD HH:mm:ss')
    },
    getMineScoreList() {
      let options = {
        score: Number(this.activeTab) 
      }
      getMineScoreListServe(options).then(res => {
        if (res.code == 200) {
          this.tableData = res.data;
        }
      })
    },
    handleClick(tab, event) {
      this.activeTab = tab.name;
    },
    downLoad() {
      let params = {
        Score: Number(this.activeTab)
      };
      this.download(
        "/mine/score/system/export",
        {
          params,
          title:`${this.activeTab}分矿计分详情`
        },
        `计分详情_${new Date().getTime()}.xlsx`
      );
    }
  },
};
</script>

<style scoped lang="scss"></style>